<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="/static/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
    <title>index</title>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">WebBlog</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">博客</a></li>
                <li><a href="#">日志</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 随笔 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">jmeter</a></li>
                        <li><a href="#">EJB</a></li>
                        <li><a href="#">Jasper Report</a></li>
                        <li class="divider"></li>
                        <li><a href="#">分离的链接</a></li>
                        <li class="divider"></li>
                        <li><a href="#">另一个分离的链接</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="container" style="padding-top: 50px">
    {% for blog in blogs %}
    <div>
        <h2>{{blog.title}}</h2>
        <h4><small>{{blog.create_at | time_filter}}</small></h4>
        <div>
           在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。
            而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。
            这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。
            也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
        </div>
    </div>
    {% endfor %}
</div>

</body>
</html>